import { mix } from "../utils";

// 自定义换肤操作 【只有 primary 的变量的 换肤 才 可以正常】
export const useChangeColor = (color: string) => {
  const node = document.documentElement;
  // 前缀
  const pre = "--el-color-primary";

  // 亮色
  const mixWhite = "#ffffff";

  // 暗色
  const mixBlack = "#000000";

  // 直接为根设置内联样式覆盖:root选择器的样式
  node.style.setProperty(pre, color);
  for (let i = 1; i < 10; i += 1) {
    node.style.setProperty(`${pre}-light-${i}`, mix(color, mixWhite, i * 0.1));
  }
  node.style.setProperty(`${pre}-dark`, mix(color, mixBlack, 0.1));
};
